<template>
  <n-grid cols="2" responsive="screen">
    <n-grid-item>
      <n-spin size="small" :show="loading">
      <n-form :label-width="80" :model="formValue" size="small" :rules="rules" ref="formRef" label-placement="left">
        <n-form-item label="账号">
          {{formValue.username}}
        </n-form-item>
        <n-form-item label="头像" path="imageList" :show-require-mark="false">
          <BasicUpload
            :action="`${uploadUrl}/upload/uploadImg`"
            :headers="uploadHeaders"
            name="file"
            :width="100"
            :height="100"
            @uploadChange="uploadChange"
            v-model:value="formValue.imageList"
          />
        </n-form-item>
        <n-form-item label="用户名" path="realName" :show-require-mark="false">
          <n-input v-model:value="formValue.realName" placeholder="请输入用户名" />
        </n-form-item>
        <n-form-item label="性别" path="gender" :show-require-mark="false">
          <n-select v-model:value="formValue.gender" :options="genderOptions" />
        </n-form-item>
<!--        <n-form-item label="生日" path="birthday" :show-require-mark="false">-->
<!--          <n-date-picker v-model:value="formValue.birthday" format="yyyy-MM-dd" type="date" clearable style="width: 100%" />-->
<!--        </n-form-item>-->
        <n-form-item label="联系地址" path="address" :show-require-mark="false">
          <n-input v-model:value="formValue.address" type="textarea" placeholder="请输入联系地址" />
        </n-form-item>
        <n-form-item label="个人简介">
          <n-input v-model:value="formValue.remark" type="textarea" placeholder="请输入个人简介" />
        </n-form-item>
        <n-form-item label="部门">
          {{formValue.deptName}}
        </n-form-item>
        <div>
          <n-space>
            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
          </n-space>
        </div>
      </n-form>
      </n-spin>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts">
  import { defineComponent,reactive, ref,onMounted,unref} from 'vue';
  import { useMessage } from 'naive-ui';
  import {useUserStore} from "@/store/modules/user";
  import { BasicUpload } from '@/components/Upload';
  import {useGlobSetting} from "@/hooks/setting";
  import {editUser} from "@/api/system/user";
  import {formatToDate} from "@/utils/dateUtil";

  export default defineComponent({
    name:'BasicSetting',
    components:{
      BasicUpload
    },
    setup(props,context){
      const useStore=useUserStore();
      const globSetting = useGlobSetting();
      const { uploadUrl } = globSetting;
      const uploadHeaders = reactive({
        Authorization: "Bearer "+useStore.token,
      });
      const loading=ref(false);
      const genderOptions=[
        {label:'男',value:"1"},
        {label:'女',value:"2"}
      ];
      let formValue = ref({
        imageList:[useStore.info.avatar]
      });
      const rules = {
        realName: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        gender: {
          required: true,
          message: '请选择您的性别',
          trigger: ['change','blur'],
        },
        birthday: {
          type:'number',
          required: true,
          message: '请选择您的生日',
          trigger: ['change','blur'],
        },
        address: {
          required: true,
          message: '请输入联系地址',
          trigger: ['change','blur'],
        },
        imageList:{type:'array',required:true,trigger:'change',message:'请上传头像'},
      };
      const formRef: any = ref(null);
      const message = useMessage();
      onMounted(()=>{
        let info = useStore.info;
        formValue.value=info;
        formValue.value.imageList=[info.avatar];
      })
      function formSubmit() {
        console.log(formValue)
        formRef.value.validate((errors) => {
          if (!errors) {
            loading.value=true;
            formValue.value.avatar=formValue.value.imageList[0];
            delete formValue.value.permissionList;
            delete formValue.value.roleList;
            editUser(formValue.value).then(res=>{
              if(res){
                message.success('用户信息更新成功');
                loading.value=false;
                context.emit('on-success');
              }
            }).catch((error=>{

            })).finally(()=>{
              loading.value=false;
            })
          } else {
            message.error('验证失败，请填写完整信息');
          }
        });
      };
      function uploadChange(list:any){
        if(list.length>0){
          formValue.value.imageList= unref(list);
        }else{
          formValue.value.imageList=[]
        }
      }
      return {
        rules,
        formValue,
        uploadUrl,
        uploadHeaders,
        genderOptions,
        uploadChange,
        formSubmit,
        formRef,
        loading
      }
    }
  })

</script>
